<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>操作</h1>

    学生学号 :<input type="text" name="" id="">

    <br> 姓名 :<input type="text" name="" id="">
    <br> 班级序号 :<input type="text" name="" id="">
    <br> 英语分数 :<input type="text" name="" id="">
    <br> 语文分数 :<input type="text" name="" id="">
    <br> 数学分数 :<input type="text" name="" id="">
    <br> 学期 :<input type="text" name="" id="">
    <br>

    <button>添加</button>
    <br>

    <p>
        id:<input type="text" name="" id="">
        <button>删除</button>
    </p>
    <p>
        名字:<input type="text" name="" id="">
        <button>搜索</button>
    </p>
    <button>获取</button>
    <br> id :<input type="text" name="" id="">
    <br> 学生学号 :<input type="text" name="" id="">

    <br> 姓名 :<input type="text" name="" id="">
    <br> 班级序号 :<input type="text" name="" id="">
    <br> 英语分数 :<input type="text" name="" id="">
    <br> 语文分数 :<input type="text" name="" id="">
    <br> 数学分数 :<input type="text" name="" id="">
    <br> 学期 :<input type="text" name="" id="">
    <br>

    <button>修改</button>
    <br>
</body>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

<script>
    $('button').eq(0).click(() => {
        $.ajax({
            url: 'http://localhost:3000/api/add',
            type: 'post',
            data: {
                StudentIDnumber: $('input').eq(0).val(),
                name: $('input').eq(1).val(),
                Classnumber: $('input').eq(2).val(),
                Mathematics: $('input').eq(3).val(),
                English: $('input').eq(4).val(),
                language: $('input').eq(5).val(),
                semester: $('input').eq(6).val()
            },
            dataType: 'json',
            success: (res) => {
                console.log(res);

            }
        })
    })

    $('button').eq(1).click(() => {
        $.ajax({
            url: 'http://localhost:3000/api/del',
            type: 'post',
            data: {
                id: $('input').eq(7).val(),
            },
            dataType: 'json',
            success: (res) => {
                console.log(res);

            }
        })
    })



    $('button').eq(2).click(() => {
        $.ajax({
            url: 'http://localhost:3000/api/search',
            type: 'post',
            data: {
                name: $('input').eq(8).val(),
            },
            dataType: 'json',
            success: (res) => {
                console.log(res);

            }
        })
    })



    $('button').eq(3).click(() => {
        $.ajax({
            url: 'http://localhost:3000/api/list',
            type: 'get',
            dataType: 'json',
            success: (res) => {
                console.log(res);

            }
        })
    })



    $('button').eq(4).click(() => {
        $.ajax({
            url: 'http://localhost:3000/api/modify',
            type: 'post',
            data: {
                id: $('input').eq(9).val(),
                StudentIDnumber: $('input').eq(10).val(),
                name: $('input').eq(11).val(),
                Classnumber: $('input').eq(12).val(),
                Mathematics: $('input').eq(13).val(),
                English: $('input').eq(14).val(),
                language: $('input').eq(15).val(),
                semester: $('input').eq(16).val()
            },
            dataType: 'json',
            success: (res) => {
                console.log(res);

            }
        })
    })
</script>

</html>